import { Directive,ElementRef,HostListener,Input } from '@angular/core';

//appMybgcolor="blue"
//[appMybgcolor]="'blue'"
@Directive({
  selector: '[appMybgcolor]'
})
export class MybgcolorDirective {
  constructor(private el:ElementRef) { 
  		
  }
  @Input() myDefaultColor:string;
  @Input("appMybgcolor") color:string;//设置别名
  @HostListener("mouseenter",['$event']) onmouseenter(event){
    console.log(event);
  	this.setbgcolor(this.color ||  this.myDefaultColor);
  }
  @HostListener("mouseleave") onmouseleave(){
  	this.setbgcolor('#fff')
  }
  
  setbgcolor(color:string){
  	this.el.nativeElement.style.backgroundColor=color;
  }

}
